<template>
    <div
        class="top_bar_contaienr"
        :style="{
            color: color,
            backgroundColor: backgroundColor,
            fontSize: fontSize + 'px',
            height: height + 'px',
            justifyContent: justifyContent,
        }"
    >
        欢迎进入demo！
    </div>
    <!-- 672 1056 1312 -->
</template>

<script setup>
const props = defineProps({
    color: {
        type: String,
        default: '#4D4D4D'
    },
    backgroundColor: {
        type: String,
        default: '#D8D8D8'
    },
    fontSize: {
        type: String,
        default: '14'
    },
    height: {
        type: String || Number,
        default: '40'
    },
    justifyContent: {
        type: String,
        default: 'start'
    }
})
</script>

<style lang="scss" scoped>
.top_bar_contaienr{
    @media screen and (max-width: 512px) {
        padding: 0 30px;
        width: calc(100% - 60px);
    }
    @media screen and (min-width: 513px) and (max-width: 1024px) {
        padding: 0 7.5%;
        width: 85%;
    }
    @media screen and (min-width: 1025px) {
        padding: 0 17.5%;
        width: 65%;
    }

    display: flex;
    align-items: center;
}
</style>